<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="mytitle">邵柳不在的第N天</title>
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body {
            background: url("./timg.jpg");
            overflow-y: auto;
            overflow-x: hidden;
        }

        html, body {
            width: 100%;
        }

        p {
            color: azure;
            text-align: center;
            font-size: 2.5rem;
            text-shadow: 5px 5px 15px blue;
            transition: all .5s;
        }

        p:hover {
            transform: scale(1.5);
            transition: all;
        }

        .sl {
            margin-top: 100px;
            font-size: 4rem;
            font-weight: 800;
        }

        .time:nth-child(2) {
            font-size: 4.5rem;
            font-weight: 400;
        }

        .time:nth-child(3) {
            font-size: 2rem;
            font-weight: 300;
        }

        .time:nth-child(4) {
            font-size: 1.5rem;
            font-weight: 200;
        }

        .time:nth-child(5) {
            font-size: 1.4rem;
            font-weight: 100;
        }


        * {
            margin: 0;
            padding: 0;
        }

        #say {
            color: chartreuse;
            transition: all .5s;
            text-shadow: 5px 5px 15px red;
        }
        .bgm {
            visibility: hidden;
        }
    </style>
    <script>

        function getCurTime() {
            var d = document.getElementById('day')
            var h = document.getElementById('hour')
            var m = document.getElementById('minutes')
            var s = document.getElementById('seconds')
            var title = document.getElementById('mytitle')


            var start = new Date('Feb 21, 2018 00:00:00')
            var now = new Date()
            var result = now.getTime() - start
            var days = Math.floor(result / (24 * 3600 * 1000))
            var leave1 = result % (24 * 3600 * 1000)
            var hours = Math.floor(leave1 / (3600 * 1000))
            var leave2 = leave1 % (3600 * 1000)
            var minutes = Math.floor(leave2 / (60 * 1000))
            var leave3 = leave2 % (60 * 1000)
            var seconds = Math.round(leave3 / 1000)
            d.innerText = '第' + days + '天'
            h.innerText = '第' + hours + '小时'
            m.innerText = '第' + minutes + '分钟'
            s.innerText = '第' + seconds + '秒'
            title.innerText = '邵柳不在的第'+days+'天'
        }

        function randomSay() {
            var say = document.getElementById('say')
            var says = [
                '哇噻',
                '是兄弟，今晚八点就来砍我',
                '你栓释一下',
                '不赌不赌，今年运气不好',
                '是兄弟，就回来上班',
                '2018-2-24 17:17 ZH说不相信自己会掉头发 说自己头发越来越多越来越黑'
            ]
            var number = RandomNumBoth(0, says.length - 1)
            say.innerText = says[number]
        }

        function RandomNumBoth(Min, Max) {
            var Range = Max - Min
            var Rand = Math.random()
            var num = Min + Math.round(Rand * Range) //四舍五入
            return num
        }

        window.onload = function () {
            randomSay()
            getCurTime()
            setInterval(function () {
                getCurTime()
            }, 1000)
            setInterval(function () {
                randomSay()
            }, 5000)
        }

    </script>
</head>
<body>
<div>
    <p class="sl">绍柳不在的</p>
    <p class="time" id="day">…………</p>
    <p class="time" id="hour">…………</p>
    <p class="time" id="minutes">…………</p>
    <p class="time" id="seconds">…………</p>
    <p style="font-size: 5rem">想他</p>
    <p id="say">……</p>
    <div class="bgm" style="position: absolute;top: 0">
        <embed src="./bgm.mp3" hidden="true" autostart="true" loop="loop"></embed>
    </div>
</div>
</body>
</html>